/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      预览      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.QuestionnairePreview {
  /* ============================== 手机端 ============================== */
  &-app {
    max-width: 360px !important;
    box-shadow: 0 0 10px 0 #eee;
  }
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      页签      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.QuestionnairePreview-MyTab {
  position: fixed;
  z-index: 10;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);

  /* ============================== 页签项 ============================== */
  > div {
    width: 20px;
    padding: 10px;
    border-radius: 4px;
    font-size: 20px;
    color: #fff;
    background: var(--Info);
    transition: 0.3s;
    cursor: pointer;

    /* —————————————————————————————— 间隔 —————————————————————————————— */
    + div {
      margin-top: 2px;
    }

    /* —————————————————————————————— 悬浮 —————————————————————————————— */
    &:hover {
      opacity: 0.9;
    }
  }

  /* ============================== 激活项 ============================== */
  &-active {
    background: var(--Primary) !important;
  }
}
